@primary-color: #63c178;
@tabbar-item-active-color: @primary-color;
@tab-active-text-color: @primary-color;
@nav-bar-background-color: transparent;
@nav-bar-icon-color: white;
@nav-bar-text-color: white;
@nav-bar-title-text-color: white;
@button-border-radius: 8px;
@tabs-default-color: @primary-color;
@tabbar-background-color: transparent;
@tabbar-item-font-size: 11px;
@checkbox-checked-icon-color: @primary-color;

.flex-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.emoji {
  vertical-align: bottom;
  width: 22px;
  height: 22px;
}

:root {
  /* ------------------------------------------------------------------- 
      Assign the default/constant/env values to CSS variables
  */
  --safe-area-inset-top: 0px;
  --safe-area-inset-right: 0px;
  --safe-area-inset-bottom: 0px;
  --safe-area-inset-left: 0px;

  /* it is probably safe to skip the `constant` test in 2023 :) */
  @supports (top: constant(safe-area-inset-top)) {
    --safe-area-inset-top: var(--status-bar-height);
    --safe-area-inset-right: constant(safe-area-inset-right);
    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
    --safe-area-inset-left: constant(safe-area-inset-left);
  }

  @supports (top: env(safe-area-inset-top)) {
    --safe-area-inset-top: var(--status-bar-height);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
  }
}

.safe-area-top {
  box-sizing: border-box;
  padding-top: var(--safe-area-inset-top) !important;
}

.safe-area-bottom {
  box-sizing: border-box;
  padding-bottom: var(--safe-area-inset-bottom) !important;
}
